<html>
<head>
<style>
.blockquote { background: #fff; width: 600px; padding: 5px 10px; margin: 10px; border: 4px solid #f4f4f4; overflow: hidden;}
body { margin: 20px auto; width: 600px; background: #f9f9f9;}
</style>
</head>
<body>
<p><h2>Style 1</h2></p>
<div class="blockquote">
<p><i>.page-navigation{clear:both;margin:30px auto;text-align:center;}<br />
.page-navigation span,.page-navigation a{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}<br />
.page-navigation a:hover,.page-navigation .current{background:#CECECE;text-decoration:none;color: #000;}<br />
.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #888;}<br />
.page-navigation .pages{border:none;}</i></p></div>

<p><h2>Style 2</h2></p>

<div class="blockquote"><p><i>.page-navigation{clear:both;margin:30px auto;text-align:center;}<br />
.page-navigation span,.page-navigation a{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}<br />
.page-navigation a:hover,.page-navigation .current{background:#EC8D04;text-decoration:none;color: #fff;}<br />
.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #fff;-webkit-box-shadow: inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);}<br />
.page-navigation .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}</i></p></div>

<p><h2>Style 3</h2></p>

<div class="blockquote"><p><i>.page-navigation{clear:both;margin:30px auto;text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}<br />
.page-navigation span,.page-navigation a{padding: 3px 10px;margin-right:5px; color: #fff;}<br />
.page-navigation a:hover,.page-navigation .current{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}<br />
.page-navigation .pages{border:none;background: none;}</i></p></div>

<p><b>Press CTRL+F and find the below code.</b></p>

<div class="blockquote"><p><i>&lt;b:widget id=&#039;Blog1&#039; locked=&#039;true&#039; title=&#039;Blog Posts&#039; type=&#039;Blog&#039;&gt;</i></p></div>

<p><b>Add the below Script just below the above code.</b></p>

<div class="blockquote"><p><i>
&lt;b:includable id=&#039;page-navi&#039;&gt;<br />
&lt;div class=&#039;page-navigation&#039;&gt;<br />
&lt;script type=&#039;text/javascript&#039;&gt;<br />
var pgNavigConf = {<br />
perPage: 7,<br />
numPages: 6,<br />
firstText: &amp;quot;First&amp;quot;,<br />
lastText: &amp;quot;Last&amp;quot;,<br />
nextText: &amp;quot;Next&amp;quot;,<br />
prevText: &amp;quot;Prev&amp;quot;<br />
}<br />
&lt;/script&gt;<br />
&lt;script src=&#039;http://helplogger.googlecode.com/svn/trunk/page-navigation.js&#039; type=&#039;text/javascript&#039;/&gt;<br />
&lt;div class=&#039;clear&#039;/&gt;<br />
&lt;/div&gt;<br />
&lt;/b:includable&gt;<br />
</i></p></div>

<p><b>Find this code:</b><br />
<div class="blockquote"><i>&lt;b:include name=&#039;nextprev&#039;/&gt;</i></p></div>

<p><b>Replace it with this one below:</b></p>

<div class="blockquote"><p><i>
&lt;b:if cond=&#039;data:blog.pageType == &quot;index&quot;&#039;&gt;<br />
&lt;b:include name=&#039;page-navi&#039; /&gt;<br />
&lt;b:else/&gt;<br />
&lt;b:if cond=&#039;data:blog.pageType == &quot;archive&quot;&#039;&gt;<br />
&lt;b:include name=&#039;page-navi&#039; /&gt;<br />
&lt;/b:if&gt;<br />
&lt;/b:if&gt;<br />
</i></p></div>

<p><b>Note: If you can't find the old page navigation code, try to find this section of code: </b></p>
<div class="blockquote"><p><i>
&lt;b:section class=&#039;main&#039; id=&#039;main&#039; showaddelement=&#039;no&#039;&gt;<br />
&lt;b:widget id=&#039;Blog1&#039; locked=&#039;true&#039; title=&#039;Blog Posts&#039; type=&#039;Blog&#039;&gt;<br />
...<br />
&lt;b:includable id=&#039;main&#039; var=&#039;top&#039;&gt;<br />
...<br />
&lt;/b:includable&gt;<br />
&lt;/b:widget&gt;<br />
&lt;/b:section&gt;<br />
</i></p></div>
<p><b>Insert this code immediately above the <i>&lt;/b:includable&gt;</i> tag:</b> </p>
<div class="blockquote"><p>
<i>
&lt;b:if cond=&#039;data:blog.pageType == &quot;index&quot;&#039;&gt;<br />
&lt;b:include name=&#039;page-navi&#039; /&gt;<br />
&lt;b:else/&gt;<br />
&lt;b:if cond=&#039;data:blog.pageType == &quot;archive&quot;&#039;&gt;<br />
&lt;b:include name=&#039;page-navi&#039; /&gt;<br />
&lt;/b:if&gt;<br />
&lt;/b:if&gt;<br />
</i></p></div>
</body>
</html>